<template>
  <Left_box>
    <Lease_title titleText="区域综合信息" :width="450" />
    <Box :height="150">
      <div class="info1">
        <div class="item" v-for="(item, index) in info">
          <div class="numInfo">
            <div class="num">{{ item.num }}</div>
            <div class="th">个</div>
          </div>
          <div class="imggg">
            <img :src="item.icon" alt="" />
          </div>
          <div class="labels">{{ item.name }}</div>
        </div>
      </div>
    </Box>

    <Lease_title titleText="飞行环境" :width="450" />
    <Box class="box" :height="200" :width="450">
      <div class="info2">
        <div class="item" v-for="(item, index) in info1">
          <div class="imgg1">
            <img src="img/home/list_icon.png" alt="" />
          </div>
          <span>{{ item.name }}</span>
          <span>{{ item.num }}</span>
          <!-- <div class="imgg2">
                        <img src="img/home/icon_预览.png" alt="">
                    </div> -->
        </div>
      </div>
    </Box>
    <Lease_title titleText="航线信息" :width="450" />
    <Box :height="700">
      <div class="table-box">
        <div class="table-head">
          <div class="head-item">发生时间</div>
          <div class="head-item">路段名称</div>
          <!--          <div class="head-item">起飞</div>-->
          <div class="head-item">飞行时长</div>
          <div class="head-item">状态</div>
        </div>
        <div class="table-body">
          <div class="table-body-warp1">
            <div :class="['row', item.status == 1 ? '' : 'error']" style="color: #ffffffdd" v-for="(item, index) in tableList" :key="index">
              <div class="col">{{ item.name }}</div>
              <div class="col">{{ item.local }}</div>
              <div class="col">{{ item.time }}</div>
              <div class="col" :style="`color:${tableStatusList[item.status].color}`">
                {{ tableStatusList[item.status].label }}
              </div>
              <!--          <div class="col">离线</div>-->
            </div>
          </div>
        </div>
      </div>
    </Box>
  </Left_box>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Lease_title from '@/components/Lease_title/index.vue'
import Left_box from '@/components/left_box.vue'
import { startMarquee } from '@/utils'
const info = ref([
  {
    name: '机舱数量',
    num: 25,
    icon: require('@/assets/images/panel/仓库 (1).png')
  },
  {
    name: '无人机数量',
    num: 30,
    icon: require('@/assets/images/panel/无人机 (1).png')
  },
  {
    name: '航线数量',
    num: 15,
    icon: require('@/assets/images/panel/路线 (1).png')
  }
])
const info1 = ref([
  {
    name: '平均温度',
    num: '20 ℃'
  },
  {
    name: '平均风速',
    num: '30 km/h'
  },
  {
    name: '气压',
    num: '1013.25 hPa'
  },
  {
    name: '湿度',
    num: '45%'
  }
  // {
  //    name:'能见度',
  //    num:'良好'
  // },
])

// 页面加载的起始时间
const startTime = ref(new Date())

// 响应式数据，用于存储时间的每个部分的字符形式
const timeChars = ref({
  days: ['0', '0'],
  hours: ['0', '0'],
  minutes: ['0', '0'],
  seconds: ['0', '0']
})

// 更新时间的函数
const updateTime = () => {
  const now = new Date()
  const diff = now - startTime.value // 当前时间和起始时间的差值，单位为毫秒

  // 计算天、小时、分钟、秒
  const secondsTotal = Math.floor(diff / 1000)
  const days = Math.floor(secondsTotal / (3600 * 24))
  const hours = Math.floor((secondsTotal % (3600 * 24)) / 3600)
  const minutes = Math.floor((secondsTotal % 3600) / 60)
  const seconds = secondsTotal % 60

  // 更新响应式数据
  timeChars.value.days = String(days).padStart(2, '0').split('')
  timeChars.value.hours = String(hours).padStart(2, '0').split('')
  timeChars.value.minutes = String(minutes).padStart(2, '0').split('')
  timeChars.value.seconds = String(seconds).padStart(2, '0').split('')
}

const tableList = [
  {
    id: 1,
    name: ' 11-30 10:00',
    time: '54min',
    local: '金鸡湖街道',
    status: 2
  },
  {
    id: 2,
    name: ' 11-30 10:05',
    time: '20min',
    local: '狮山街道',
    status: 0
  },
  {
    id: 3,
    name: ' 11-30 10:13',
    time: '40min',
    local: '太湖街道',
    status: 1
  },
  {
    id: 4,
    name: ' 11-30 10:42',
    time: '15min',
    local: '城南街道',
    status: 0
  },
  {
    id: 5,
    name: ' 11-30 11:00',
    time: '24min',
    local: '唯亭街道',
    status: 0
  },
  {
    id: 6,
    name: ' 11-13 11:16',
    time: '6min',
    local: '斜塘街道',
    status: 0
  },
  {
    id: 7,
    name: ' 11-30 12:02',
    time: '18min',
    local: '胜浦街道',
    status: 0
  },
  {
    id: 8,
    name: ' 11-13 12:16',
    time: '16min',
    local: '枫桥街道',
    status: 0
  },
  {
    id: 9,
    name: ' 11-30 12:52',
    time: '8min',
    local: '郭巷街道',
    status: 0
  },
  {
    id: 10,
    name: ' 11-30 13:02',
    time: '18min',
    local: '东渎街道',
    status: 0
  },
  {
    id: 11,
    name: ' 11-13 14:16',
    time: '16min',
    local: '香山街道',
    status: 0
  },
  {
    id: 12,
    name: ' 11-30 14:52',
    time: '8min',
    local: '越溪街道',
    status: 0
  },
  {
    id: 9,
    name: ' 11-30 12:52',
    time: '8min',
    local: '郭巷街道',
    status: 0
  },
  {
    id: 10,
    name: ' 11-30 13:02',
    time: '18min',
    local: '东渎街道',
    status: 0
  },
  {
    id: 11,
    name: ' 11-13 14:16',
    time: '16min',
    local: '香山街道',
    status: 0
  },
  {
    id: 12,
    name: ' 11-30 14:52',
    time: '8min',
    local: '越溪街道',
    status: 0
  }
]

const tableStatusList = [
  {
    color: '#41A5A0',
    label: '已飞行'
  },
  {
    color: '#FFCE7F',
    label: '未飞行'
  },
  {
    color: '#FF8A95',
    label: '延期飞行'
  }
]

// 组件挂载后设置定时器，每秒更新时间
onMounted(() => {
  updateTime() // 初始化立即更新一次时间
  const interval = setInterval(updateTime, 1000)
  startMarquee('table-body-warp1', '.row')
  // 组件卸载前清除定时器
  onUnmounted(() => {
    clearInterval(interval)
  })
})
</script>

<style lang="scss" scoped>
.time {
  @include MarginTop(30);
  @include Width(400);
  display: flex;
  .item1 {
    display: flex;
    p {
      background: url('~@/assets/images/panel/NUM_bg.png') no-repeat;
      background-size: 100% 100%;
      @include Width(38);
      @include wHeight(57);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #f8ce7b;
      @include FontSize(32);
    }
  }
  .text {
    @include FontSize(24);
    color: #cce7f3;
    // @include wHeight(57);
    height: 100%;
    @include Margin(20, 18, 20, 18);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.info1 {
  display: flex;
  @include Width(400);
  @include MarginTop(15);
  .item {
    @include Margin(20, 20, 20, 20);
    @include Width(150);
    // background: url('~@/assets/images/panel/box.png') no-repeat;
    background-size: 100% 100%;
    @include Width(106);
    @include wHeight(80);
    display: flex;
    justify-content: center;
    flex-direction: column;
    // align-items: center;
    .numInfo {
      // @include MarginTop(-20);
      @include Width(100);
      display: flex;
      justify-content: center;
      align-items: center;
      .num {
        @include FontSize(30);
        // color: #f8ce7b;
      }
      .th {
        @include FontSize(12);
      }
    }
    .imggg {
      @include MarginTop(15);
      display: flex;
      justify-content: center;
      img {
        @include Width(44);
        @include wHeight(44);
      }
    }
    .labels {
      @include MarginTop(20);
      @include FontSize(16);
      color: #ffffff;
      text-align: center;
      @include MarginBottom(10);
    }
  }
}
.info2 {
  .item {
    display: flex;
    background: url('~@/assets/images/panel/列表行背景.png') no-repeat;
    background-size: 100% 100%;
    @include Width(468);
    @include wHeight(36);
    @include Margin(10, 0, 10, 0);
    align-items: center;
    .imgg1 {
      @include Margin(0, 20, 0, 20);
      img {
        @include Width(9);
        @include wHeight(9);
      }
    }
    span {
      display: flex;
      // justify-content: center;
      @include Width(360);
      @include FontSize(14);
      color: #ffffff;
      @include LetterSpacing(1);
    }
  }
}
.info3 {
  @include MarginTop(20);
  display: flex;
  .left {
    @include Width(272);
    @include wHeight(145);
    background: url('~@/assets/images/panel/pic_bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    video {
      @include Width(260);
      @include wHeight(125);
    }
  }
  .right {
    @include Width(200);
    @include wHeight(360);
    // background: url('~@/assets/images/panel/box_bg.png') no-repeat;
    // background-size: 100% 100%;
    display: flex;
    // justify-content: center;
    // align-items: center;
    flex-direction: column;
    .itemr1 {
      @include Width(185);
      @include wHeight(67);
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      background: url('~@/assets/images/panel/box_bg.png') no-repeat;
      background-size: 100% 100%;
      .titlee {
        @include FontSize(14);
        @include LineHeight(30);
        color: #ffffff;
        @include MarginRight(20);
      }
      .numm1 {
        @include FontSize(24);
        color: #c9d2e1;
      }
      .numm2 {
        @include FontSize(24);
        color: #e76188;
      }
    }
  }
}
.table-box {
  margin: 0 auto;
  width: 85%;
  @include Width(450);
  @include hHeight(600);
  display: flex;
  flex-direction: column;
  @include FontSize(18);
  box-sizing: border-box;
  @include MarginTop(15);
  .table-head {
    @include Padding(10, 0, 10, 0);

    display: flex;
    background: rgba(200, 226, 255, 0.185);
    //border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .head-item {
      //flex: 1;
      text-align: center;

      &:first-child {
        @include Width(130);
      }

      &:nth-child(2) {
        @include Width(130);
      }

      &:nth-child(3) {
        @include Width(110);
      }

      &:nth-child(4) {
        @include Width(70);
      }
    }
  }

  .table-body {
    flex: 1;
    overflow-y: hidden;
    //@include wHeight(252);
    @include FontSize(13);

    .row {
      display: flex;
      width: 100%;
      @include Padding(15, 0, 15, 0);
      box-sizing: border-box;

      .col {
        //flex: 1;
        text-align: center;
        @include FontSize(16);

        &:first-child {
          @include Width(130);
        }

        &:nth-child(2) {
          @include Width(130);
        }

        &:nth-child(3) {
          @include Width(110);
        }

        &:nth-child(4) {
          @include Width(70);
        }
      }

      &:nth-child(even) {
        background: rgba(65, 156, 192, 0.3);
      }
    }
  }
}
</style>
